<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<link rel="stylesheet" href="../sidebar.css" />
		<style>
			div{
				width: 300px;
				height: 300px;
			}
			div.taiyi{
				background:url(./img/10.png);
				background-size: 100% 100%;
				position: absolute;
				/*堆叠属性：必须存在相对或者绝对定位情况下，z-index堆叠属性：属性值：99999内*/
				z-index: 999;
			}
			div.shengongbao{
				background:url(./img/40.png) ;
				background-size: 100% 100%;
				position: absolute;
				z-index: 1000;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 左栏：左栏弹窗功能
		语义化元素---div功能一致【有宽没高】
		div起名---不利于SEO优化
		涵盖名称---有利于SEO优化
		建议：搭建页面结构，固定功能：左栏、主区域、导航栏
		    使用语义化元素
		article元素：独立的内容区域块，存储：新闻、博客区域、左栏弹出的功能栏！
		
		
		-->
		
		<article>
			<ul class="sidebar">
				<li>手机 平板 电话卡</li>
				<li>电视 盒子</li>
				<li>路由器 智能硬件</li>
				<li>移动电源 插线板</li>
				<li>耳机 音箱</li>
				<li>电池 存储卡</li>
				<li>保护套 后</li>
				<li>贴膜</li>
				<li>米兔</li>
				<li>箱包 其他周边</li>
			</ul>
		</article>
		
		
		
		
		<!--相对定位与绝对定位，页面弹出功能
		    相对定位：position：relative，使用率高：相对于父级元素定位、元素存在于文档流中
			绝对定位：position：absolute，使用率较高：存在父级，按照父级定位，没有父级按照，网页
			         左上角位置进行定位，定位脱离文档路！
		    堆叠问题：z-index属性：属性值，属性值越大，越靠前！
					 
			根据相对定位与绝对定位的特点，实现左栏功能
			左栏区使用相对定位：左栏区域基本不会移动【理解：钩点位】
			左栏弹出使用绝对定位：左栏弹出区域频繁切换
		-->
		<d iv class="taiyi"></div>
		<d iv class="shengongbao"></div>
	</body>
</html>